<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/bootstrap.min.css" type="text/css">
    <title></title>
    <style>
        html, body {
            font-family: "Microsoft Yahei";
            width: 100%;
            height: 100%;
            position: relative;
        }
        ul{
            list-style:none;
        }
        a {
            color: #333;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: #1B1B21;
            padding: 10px 0;
            text-align: center;
            position: fixed;
            top: 0;
            z-index: 99;
        }
        header h4 {
            line-height: 40px;
            margin: 0 30px;
            color: #fff;
        }
        header .go-back {
            margin: 8px 10px;
            float: left;
            width: 25px;
        }
        header span {
            color: #fff;
            position: absolute;
            left: 30px;
            top: 18px;
            font-family: PingFangSC-Regular;
            font-size: 17px;
            letter-spacing: -0.41px;
        }
        .search_column {
            width: 100%;
            min-height: 100%;
            position: absolute;
            top: 70px;
            left: 0;
            background-color: #fff;
            z-index: 1500;
            padding: 6px 10px;
            border-radius: 2px;
        }
        .search_column img {
            width: 25px;
            position: absolute;
            left: 14px;
            top: 10px;
        }
        .search_column {
            /*position: relative;*/
            /*margin: 0;*/
            /*padding: 6px 10px;*/
            /*background: #FFFFFF;*/
            /*border: 1px solid #DDDDDD;*/
        }
        .search_column input {
            height: 30px;
            width: 88%;
            outline: none;
            text-indent: 30px;
            border-radius: 4px;
            border: 1px solid #DDDDDD;
            background: #F9F9F9;
        }
        .search_column .search_cancle {
            display: inline-block;
            width: 10%;
            text-align: center;
            line-height: 30px;
            color: #FA942B;
            font-size: 14px;
        }
        #memberList ul li:first-child {
            color: #aaa;
            font-size: 16px;
        }
        #memberList ul li {
            position: relative;
            height: 50px;
            line-height: 40px;
            padding: 5px;
            border-bottom: 0;
        }
        #memberList .head {
            width: 35px;
            position: relative;
            top: -1px;
            left: 0;
            margin-right: 10px;
            border-radius: 100%;
        }
        #relation_del {
            padding: 0;
        }
        .relation_mask{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width:100%;
            height: 100%;
            background: #000000;
            opacity: 0.5;
            z-index: 99999;
        }
        .relation_pop{
            display: none;
            background: #FFFFFF;
            width: 200px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -65px;
            z-index: 99999;
            border-radius: 5px;
            overflow: hidden;
        }
        .relation_pop .member_detail{
            resize: none;
            width: 90%;
            margin: 5%;
        }
        .relation_pop .member_detail:focus {
            outline: none;
        }
        #relation_del .relation_btn{
            width: 50%;
            float: left;
            text-align: center;
            border: 1px solid #DDDDDD;
            padding: 5px;
        }
    </style>
</head>
<body id="ancestor">
<header>
    <a href="javascript:;" onclick="window.history.back()">
        <img src="${ctx}/static/h5/images/back.png" class="go-back" alt=""/><span>返回</span>
    </a>
    <h4>从家族成员中添加</h4>
</header>
<div id="shows">
    <div class="search_column">
        <img src="${ctx}/static/h5/images/search.png" class="search_img"/>
        <input id="seach-button" type="search" placeholder="搜索家族成员"/>
        <span class="search_cancle">取消</span>
        <div id="memberList">

            <ul>
                <c:forEach var="li" items="${list}">
                    <li><img src="${ctx}/static/h5/images/family-tree-female.png" class="head" alt=""/>${li.familyName}${li.name}</li>
                </c:forEach>
            </ul>

        </div>
    </div>
</div>
<!--添加亲属蒙版-->
<div class="relation_mask"></div>
<div class="relation_pop">
    <!--<h5>确认添加该亲属?</h5>-->
    <textarea rows="5" class="member_detail" placeholder="请描述你与该家族成员的关系"></textarea>
    <ul id="relation_del">
        <li class="relation_sure relation_btn">确认</li>
        <li class="relation_cancle relation_btn">取消</li>
    </ul>
</div>
</body>
<script src="${ctx}/static/h5/js/public/jquery-2.2.3.min.js"></script>
<script src="${ctx}/static/h5/js/public/bootstrap.min.js"></script>
<script>

  $(function(){
      //搜索框筛选人员
      var links = $('#memberList ul li')
      function getLinkText()
      {
          var allText='';
          for(var i=0;i<links.length;i++)
          {
              allText += links[i].innerText+',';
          }
          return allText;
      }
      allText = getLinkText();
      var eachLink = new Array();
      eachLink=allText.split(","); //字符分割
      var inputValLength = 0;
      var m;
      setInterval(function(){
          $('.search_cancle').on('click',function(){
              $('#seach-button').val("");
          })
          var inputVal = $('#seach-button').val();
          if(inputVal.length != inputValLength){
              links.css("display","block");
              for(m=0;m<eachLink.length;m++){
                  if(inputVal == ''){
                      links.eq(m).css("display","block");
                  }else{
                      var flag = eachLink[m].indexOf(inputVal);
                      if(flag==-1){
                          links.eq(m).css("display","none");
                      }
                  }
              }
              inputValLength = inputVal.length;
          }
      },1000);
      $('#seach-button').on('change',function(){
          var inputVal = $(this).val();

      })

      //长按亲属添加
      var timer = undefined;
      $("#memberList li").on("touchstart",function(){
          oDel = $(this)
          console.log(666)
          timer = setTimeout(function(){
              $(".relation_mask,.relation_pop").fadeIn(500)
              $(this).remove()
          },1000)
      })
      $("#memberList li").on("touchend",function(){
          clearTimeout(timer)
      })

      $(".relation_cancle").click(function(){
          $(".relation_mask,.relation_pop").fadeOut(500)
      })
      //        $(".relation_sure").click(function(){
//            $(".relation_mask,.relation_pop").fadeOut(500)
//            oDel.remove()
//
//        })



  });

</script>
</html>